<template>
	<view class="box">
		<view class="container" v-if="isShowInfo">
			<view class="item" @click="handleTo('avatar')">
				<text class="text">头像</text>
				<view class="value">
					<image :src="form.avatar?form.avatar:'../../static/avatar.webp'" mode="widthFix"></image>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>
			<view class="item" @click="handleTo('username')">
				<text class="text">用户名</text>
				<view class="value">
					<text>{{form.username}}</text>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>
			<view class="item" @click="handleTo('nickname')">
				<text class="text">昵称</text>
				<view class="value">
					<text>{{form.nickname}}</text>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>
			<view class="item" @click="handleTo('sex')">
				<text class="text">性别</text>
				<view class="value">
					<text>{{form.sex}}</text>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>
			<view class="item" @click="handleTo('phone')">
				<text class="text">手机</text>
				<view class="value">
					<text>{{form.phone}}</text>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>
			<view class="item" @click="handleTo('email')">
				<text class="text">邮箱</text>
				<view class="value">
					<text>{{form.email}}</text>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>
			<view class="item" @click="handleTo('desc')">
				<text class="text">个性签名</text>
				<view class="value">
					<text>{{form.desc}}</text>
				</view>
				<text class="iconfont iconjinru right"></text>
			</view>

			<view class="button" @click="handleLogout">
				退出登录
			</view>
		</view>
		<view class="form" v-if="!isShowInfo">
			<uni-forms :modelValue="form" ref="username" :rules="usernameRules">
				<uni-forms-item label="用户名" name="username" v-if="type==='username'">
					<uni-easyinput type="text" v-model="form.username" />
				</uni-forms-item>
			</uni-forms>
			<uni-forms :modelValue="form" ref="nickname" :rules="nicknameRules">
				<uni-forms-item label="昵称" name="nickname" v-if="type==='nickname'">
					<uni-easyinput type="text" v-model="form.nickname" />
				</uni-forms-item>
			</uni-forms>
			<uni-forms-item label="性别" name="sex" v-if="type==='sex'">
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="男" :checked="form.sex==='男'" />男
					</label>
					<label class="radio">
						<radio value="保密" :checked="form.sex==='保密'" />保密
					</label>
					<label class="radio">
						<radio value="女" :checked="form.sex==='女'" />女
					</label>
				</radio-group>
			</uni-forms-item>
			<uni-forms :modelValue="form" ref="phone" :rules="phoneRules">
				<uni-forms-item label="手机" name="phone" v-if="type==='phone'">
					<uni-easyinput type="text" v-model="form.phone" />
				</uni-forms-item>
			</uni-forms>
			<uni-forms :modelValue="form" ref="email" :rules="emailRules">
				<uni-forms-item label="邮箱" name="email" v-if="type==='email'">
					<uni-easyinput type="text" v-model="form.email" />
				</uni-forms-item>
			</uni-forms>
			<textarea value="" placeholder="请输入个性签名" v-model="form.desc" style="margin-bottom: 40rpx;"
				v-if="type==='desc'" />

			<view class="" style="text-align: center;margin-bottom: 40rpx;" v-if="type==='avatar'||type==='again'">
				<avatar selWidth="200px" selHeight="200px" @upload="myUpload"
					:avatarSrc="form.avatar?form.avatar:'../../static/avatar.webp'"
					avatarStyle="width: 400rpx; height: 400rpx; border-radius: 100%;" ref="avatarRef">
				</avatar>
			</view>

			<view class="button" v-if="type==='avatar'">
				<view @click="handleUpload">点击上传</view>
				<view @click="handleCancel">取消</view>
			</view>
			<view class="button" v-if="type!=='avatar'&&type!=='again'">
				<view @click="handleUpdate">保存</view>
				<view @click="handleCancel">取消</view>
			</view>
			<view class="button again" v-if="type==='again'">
				<view @click="handleUpload">重新上传</view>
				<view @click="handleSaveAvatar">确认保存</view>
				<view @click="handleCancel">取消</view>
			</view>

		</view>

	</view>
</template>

<script>
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		components: {
			avatar
		},
		data() {
			return {
				isUpload: false,
				form: {
					nickname: '',
					username: '',
					phone: '',
					email: '',
					sex: '',
					desc: '',
					avatar: ''
				},
				type: '',
				isShowInfo: true,
				usernameRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名',
						}, {
							minLength: 6,
							maxLength: 20,
							errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符'
						}],
						validateTrigger: 'change'
					}
				},
				nicknameRules: {
					nickname: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称',
						}, {
							maxLength: 20,
							errorMessage: '昵称不能超过20个字符'
						}],
						validateTrigger: 'change'
					}
				},
				phoneRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							pattern: /^1[0-9]{10}$/,
							errorMessage: '手机号码格式不正确'
						}],
						validateTrigger: 'change'
					}
				},
				emailRules: {
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						}, {
							format: 'email',
							errorMessage: '邮箱格式不正确'
						}],
						validateTrigger: 'change'
					}
				},

			};
		},
		methods: {
			handleCancel() {
				this.isShowInfo = true
			},
			handleSaveAvatar() {
				this.updateUser()
			},
			myUpload(rsp) {
				console.log(rsp.path)
				this.form.avatar = rsp.base64
				this.type = 'again'
			},
			handleUpload() {
				this.$refs.avatarRef.fChooseImg()
			},
			handleLogout() {
				this.$store.dispatch('logout').then(res => {
					uni.switchTab({
						url: "/pages/my/my"
					})
					uni.showToast({
						title: '退出登录成功',
						icon: 'none'
					});
				})
			},
			handleTo(value) {
				this.isShowInfo = false
				this.type = value
			},
			handleUpdate() {
				this.isShowInfo = true
			},
			radioChange(e) {
				this.form.sex = e.target.value
				console.log(this.form.sex)
			},
			updateUser() {
				this.$H.post('/upload_avatar', {
					avatar: this.form.avatar
				}, {
					token: true,
					noJump: false,
					toast: true
				}).then(res => {
					this.form.avatar = res;
					this.$H.post('/update_userinfo', this.form, {
							token: true,
							noJump: false,
							toast: true
						})
						.then(res => {
							console.log(res)
							this.isShowInfo = true
						})

				})
				
			},
			handleUpdate() {
				if (this.type === 'desc' && this.form.desc === '') {
					console.log(this.form.desc)
					return uni.showToast({
						icon: 'error',
						title: '个性签名不能为空'
					})
				} else {
					this.updateUser()
				}
				this.$refs[this.type].validate().then(res => {
					this.updateUser()
				})
			},

		},
		onShow() {
			this.$H.get('/user/user_info', {
				token: true,
				noJump: true,
				toast: false
			}).then(res => {
				console.log(res.user)
				this.form = res.user

			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 10rpx;

		.item {
			padding: 26rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #eeeeee;

			.value {
				flex: 1;
				display: flex;

				image {
					margin-left: auto;
					display: block;
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				text {
					margin-left: auto;
				}

			}

			.right {
				margin-left: 16rpx;
			}

		}

		.button {
			margin-top: 60rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #eeeeee;
			text-align: center;
			font-size: 36rpx;
			line-height: 100rpx;
			color: #0E151D;
		}
	}

	.form {
		margin-top: 60rpx;
		padding: 0 10rpx;

		textarea {
			width: 100%;
			height: 200rpx;
			border: 2rpx solid #e5e5e5;
		}

		.bigAvatar {
			margin: 0 auto 40rpx;
			display: block;
			width: 500rpx;
			height: 500rpx;
			border-radius: 50%;
		}

		.button {
			display: flex;
			justify-content: space-around;

			view {
				margin-top: 20rpx;
				text-align: center;
				color: #fff;
				line-height: 80rpx;
				width: 250rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #FB7299;
				font-size: 34rpx;
			}

		}

		.again {
			view {
				width: 200rpx;

			}
		}
	}
</style>
